<div class="dataTable">
  <div class="title">{{'DataManagement.TrafficAccidentReport.TrafficAccidentReport' | translate}}</div>

  <div class="table-content">
    <div class="report_filter">
      <div style="display: flex;align-items: center; margin-right: 40px;">
        <div style="margin-right: 10px;">{{'DataManagement.TrafficAccidentReport.TimeRange' | translate}}
        </div>
        <!-- <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"></nz-range-picker> -->
        <nz-range-picker [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange"
          (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate"
          [nzDisabledTime]="disabledRangeTime">
        </nz-range-picker>
      </div>

      <div style="display: flex;align-items: center; margin-right: 30px;">
        <div style="margin-right: 10px;">{{'DataManagement.TrafficAccidentReport.Interval' | translate}}
        </div>
        <nz-select [nzDisabled]="flag" nzPlaceHolder="interval" style="width: 2rem" nzAllowClear
          [(ngModel)]="intervalSelect">
          <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.id"
            [nzLabel]="'DataManagement.TrafficAccidentReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>
      <!-- <div>
      <nz-switch [ngModel]="true" nzCheckedChildren="{{'DataManagement.TrafficAccidentReport.Historical' | translate}}"
        nzUnCheckedChildren="{{'DataManagement.TrafficAccidentReport.Current' | translate}} "></nz-switch>
    </div> -->
      <!-- <div style="display: flex;align-items: center">
      <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.dataSource' | translate}}</div>
      <nz-select nzPlaceHolder="" style="width: 2rem" nzAllowClear [(ngModel)]="sourcelSelect"
        (ngModelChange)='sourceSearch()'>
        <nz-option nzValue="current" nzLabel="Current"></nz-option>
        <nz-option nzValue="historical" nzLabel="Historical"></nz-option>
      </nz-select>
    </div> -->
      <!-- <div class="searchButton" (click)="search()">{{'DataManagement.RoadCongestionReport.Search' | translate}}</div> -->
      <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search"
          nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
      </button>

    </div>

    <div class="report" *ngIf="isEchartsShow">
      <div class="report_data">
        <div class="report_title">
          {{'DataManagement.TrafficAccidentReport.Clearance' | translate}}
        </div>
        <div class="echarts-table" echarts [options]="options" (chartInit)="onChartInit($event)"></div>
        <!-- <div class="report_bottom">{{'DataManagement.TrafficAccidentReport.AccidentCases' | translate}}</div> -->
      </div>
    </div>

    <div class="bottom-table" style="margin: 0 20px">
      <div *ngIf="isShowTable">
        <!-- <div
        style="background: #BFBFBF;display: flex;justify-content: space-around;height: 50px;line-height: 50px;margin: 0 20px 0 160px;">
        <div>{{'DataManagement.TrafficAccidentReport.Minor' | translate}}</div>
        <div>{{'DataManagement.TrafficAccidentReport.Major' | translate}}</div>
        <div>{{'DataManagement.TrafficAccidentReport.Fatal' | translate}}</div>
        <div>{{'DataManagement.TrafficAccidentReport.Sum' | translate}}</div>
      </div> -->
        <!-- <div style="display: flex;justify-content: space-around;margin-top: 15px">
      <div>{{'DataManagement.TrafficAccidentReport.NumCases' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.AvgClearance' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.NumCases' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.AvgClearance' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.NumCases' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.AvgClearance' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.NumCases' | translate}}</div>
      <div>{{'DataManagement.TrafficAccidentReport.AvgClearance' | translate}}</div>
    </div> -->
      </div>

      <nz-table class="table" id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData"
        *ngIf="isShowTable" [nzFrontPagination]="false">

        <thead>
          <tr class="dataTitle">
            <th class="listTitle" nzWidth="175px"></th>
            <th *ngFor="let item of renderStatistical" class="listTitle">
              <div>{{'DataManagement.TrafficAccidentReport.' + item.name | translate}}</div>
            </th>
          </tr>
        </thead>
        <tbody class="dataList">
          <tr *ngFor="let data of basicTable.data;index as i">
            <td>
              {{intervalSelect === 'yy'? data.year_interval_zone: intervalSelect === 'mm'?
              data.mounth_interval_zone:data.interval_zone}}
            </td>
            <td>{{data.minor_total_num}}</td>
            <td>{{data.minor_avg_cleartime}}</td>
            <td>{{data.major_total_num}}</td>
            <td>{{data.major_avg_cleartime}}</td>
            <td>{{data.fatal_total_num}}</td>
            <td>{{data.fatal_avg_cleartime}}</td>
            <td>{{data.sum_total_num}}</td>
            <td>{{data.sum_avg_cleartime}}</td>
          </tr>
        </tbody>
      </nz-table>

      <div [attr.colspan]="renderHeader.length+1" style="margin:0 20px 0 20px;background-color: #2C3054 !important;color: #FFFFFF  !important;">
        <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
          [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
          (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)" *ngIf="isShowTable">
        </itmp-pagination>
      </div>
    </div>

  </div>

</div>